define("ar_fontawesome", ['css!/cdn/font-awesome-4.7.0/css/font-awesome.min.css'], function (Vue) {

    console.log(Vue)

    let cps = {

        data() {
            return {icons: [], searchTxt: "", total: 0}
        },
        methods: {
            search() {
                if (this.searchTxt === "") {
                    this.icons = iconDataList.slice(0, 100);
                    return;
                }
                this.icons = iconDataList.filter(icon => (icon.toUpperCase().indexOf(this.searchTxt.toUpperCase()) !== -1)).slice(0, 30);
            },
            searchAll() {
                this.searchTxt = "";
                this.icons = iconDataList;
            }
        },
        mounted() {
            fetch("/cdn/font-awesome-4.7.0/icons.json").then(res => res.json()).then(data => {
                iconDataList = data;
                this.total = iconDataList.length;
                this.icons = iconDataList.slice(0, 100);
            })
        },

        template: `
            <div class="ui container mt-3 mb-3">
                <h2 class="p-3 text-center">Font Awesome 4.7.0</h2>
                <div class="ui message floating">
                    使用方法：
                    <br/>
                    &ltlink href="/cdn/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" /&gt
                    <br/>
                    &lti class="fa fa-图标名"&gt&lt/i&gt
                </div>

                <div class="d-flex my-2">
                    <div class="flex-grow-1 mr-1 ui input">
                        <input type="text" v-model="searchTxt" placeholder="输入关键字回车，搜索图标..."
                            @keyup.enter="search"/>
                    </div>
                    <button type="button" class="ui button" @click="search">查询</button>
                </div>
                <div class="alert alert-success" role="alert">
                    <span class="mr-2">默认显示前 <b>100</b> 个图标，总共 <b>{{total}}</b> 个图标</span>
                    <button type="button" class="ui button" @click="searchAll">查看所有</button>
                </div>

                <div class="d-flex flex-wrap ui segment">
                    <div class="d-flex m-2 align-items-center bg-light p-2 rounded" v-for="icon in icons">
                        <i class="fa fa-2x" :class="'fa-'+icon"></i>
                        <span class="ml-1">{{icon}}</span>
                    </div>
                </div>
            </div>
        `,

    };

    return {
        cps
    }

});